
import * as echarts from 'echarts';
import { onMounted } from 'vue'
import { debounce } from '../untils/common.js'

let chart, chart2
export function lineChart(chartContainer) {
    onMounted(() => {
        chart = echarts.init(chartContainer.value);

        const options = {
            title: {
                text: '车辆违停趋势',
                left: 'left',
                textStyle: {
                    color: '#7f96f5',
                    fontSize: 16,
                },
                left: '8px'
            },
            backgroundColor: 'transparent', // 设置背景色
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                left: '5%',
                right: '10%',
                bottom: '10%',
                top: '20%',
                containLabel: true,
            },
            xAxis: {
                nameTextStyle: {
                    color: 'red'
                },
                type: 'category',
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14'],
                axisLine: {
                    lineStyle: {
                        color: '#555', // 设置坐标轴线颜色
                    },
                },
                axisLabel: {
                    color: '#7f96f5', // 设置坐标轴标签颜色
                },
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#555', // 设置坐标轴线颜色
                    },
                },
                axisLabel: {
                    color: '#7f96f5', // 设置坐标轴标签颜色
                    formatter: '{value}k'
                },
                splitLine: {
                    lineStyle: {
                        color: '#333', // 设置分隔线颜色
                        type: 'dashed', // 设置分隔线类型
                    },
                },
            },
            series: [{
                name: '违停数',
                data: [0.6, 0.6, 0.65, 0.8, 0.9, 0.85, 0.75, 0.6, 0.5, 0.55, 0.6, 0.65, 0.55, 0.65],
                type: 'line',
                smooth: false, // 平滑曲线
                lineStyle: {
                    color: 'rgb(0,179,254)', // 折线颜色
                    width: 5, // 折线宽度
                },
                itemStyle: {
                    color: '#0ff', // 数据点颜色
                    opacity: 0
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: 'rgba(0,179,254, 1)' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(0, 0, 0, 0.1)' // 100% 处的颜色
                    }]),
                },
            }],
        };
        chart.setOption(options);
    })

}
export function pieChart(piechartContainer) {

    onMounted(() => {
        chart2 = echarts.init(piechartContainer.value);

        const options2 = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
            },
            legend: {
                top: '2%',
                right: '2%',
                orient: 'vertical',
                textStyle: {
                    color: "#8FBDD9",
                    fontSize: "10px",
                },
                itemGap: 4,
                itemWidth: 8,
                itemHeight: 8,
                data: ['0次', '0-5次', '5-10次', '10-15次', '15次以上'],
            },
            series: [
                {
                    name: '违停次数',
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['47%', '75%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: "{d}%",
                        color: "#F57051",
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold',
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data: [
                        { value: 74, name: '0次', itemStyle: { color: '#00bfff' } },
                        { value: 16, name: '0-5次', itemStyle: { color: '#1e90ff' } },
                        { value: 6, name: '5-10次', itemStyle: { color: '#4682b4' } },
                        { value: 3, name: '10-15次', itemStyle: { color: '#6a5acd' } },
                        { value: 1, name: '15次以上', itemStyle: { color: '#8a2be2' } },
                    ],
                },
            ],
        };
        chart2.setOption(options2);
    })

}

const resizeChart = debounce(() => {
    if (chart) {
        // chart.setOption(options);
        chart.resize();
    }
    if (chart2) {
        // chart2.setOption(options2);
        chart2.resize();
    }
}, 500);

window.addEventListener('resize', resizeChart);